<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.box1 {
			width: 400px;
			height: 300px;
			margin: 50px auto;
			overflow: hidden;
			border: 1px solid #000;
		}
		ul {
			overflow: hidden;
		}
		li {
			float: left;
			width: 80px;
			height: 40px;
			text-align: center;
			cursor: pointer;
			background-color: skyblue;
			font: 500 20px/40px "simsun";
		}
		span {
			display: none;
			height: 260px;
			width: 400px;
			text-align: center;
			font: 700 80px/260px "simsum";
			background-color: pink;
		}
		.show {
			display: block;
		}
		.current {
			background-color: pink;
		}
	</style>

</head>
<body>
	<div class="box1" id="box1">
		<ul>
			<li class="current">裤子</li>
			<li>袜子</li>
			<li>裙子</li>
			<li>鞋子</li>
			<li>帽子</li>
		</ul>
		<div class="bottom">
			<span class="show">裤子区域</span>
			<span>袜子区域</span>
			<span>裙子区域</span>
			<span>鞋子区域</span>
			<span>帽子区域</span>
		</div>

	</div>

</body>
<!-- <script>

var box = document.getElementById("box1");
var liArr = box.getElementsByTagName("li");
var spanArr = box.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
	liArr[i].setAttribute("index",i);
	liArr[i].onclick = function(){
		for(var j=0;j<liArr.length;j++){
			liArr[j].className = "";

		}
		this.className = "current";



		var num = this.getAttribute("index");

		for(var k=0;k<spanArr.length;k++){
			spanArr[k].className = "";

		}

		spanArr[num].className ="show";



	}
}

</script> -->
<script src="../jquery-1.12.4.js"></script>
<script>

	$(function(){
		$("#box1 ul li").click(function(){
			$("#box1 ul li").removeClass("current");
			$(this).addClass("current");
			var index  = $(this).index();
			console.log(index);
			$("#box1 .bottom span").eq(index).show().siblings().hide();
		})
	})

</script>
</html>